<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- 获取相关的节点 -->

<div class="top" id="top">
<p id="ppp">我的</p>

<input type="text" value="点击输入" id="inp"> 

<span>我是span</span>
<ul id="uu">哈哈
	<li>我</li>
	<li id="ni">你</li>
	<li>他</li>
	<li>自己</li>
</ul>

</div>




</body>
<script src="common.js"></script>
<script>
var ul = document.getElementById("uu");
var inp = document.getElementById("inp");
var tops = document.getElementById("top");
var ele = document.getElementById("ni");
// for(var i=0;i<tops.childNodes.length;i++){
// 	var node = tops.childNodes[i];
// 	console.log(node.nodeType+"======"+node.nodeName+"======"+node.nodeValue);
// }

// var nodeAttr = tops.getAttributeNode("id");
// console.log(nodeAttr.nodeType+"===="+nodeAttr.nodeName+"======"+nodeAttr.nodeValue);
// 
// 
tops.firstChild.backgroundColor = "pink";
console.log(ul.childNodes);
console.log(ul.children);
console.log(ul.firstNode);
console.log(ul.firstChild);
console.log(ul.firstElementChild);
console.log(ul.lastChild);
console.log(ul.lastElementChild);
console.log(ele.nextSibling);

ele.style.backgroundColor = "red";




</script>
</html>